<%--
  Created by IntelliJ IDEA.
  User: RD
  Date: 2021/12/30
  Time: 11:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <table id="demo" lay-filter="tbdemo"></table>

</body>
<script src="../layui/layui.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    //js日期转换函数
    function dateBirth(data) {
        var time = new Date(data.time);
        var y = time.getFullYear(); // 获取年
        var M = time.getMonth() + 1; //获取月
        M = M < 10 ? ("0" + M) : M;
        var d = time.getDate(); //获取日
        d = d < 10 ? ("0" + d) : d;
        var h = time.getHours(); //获取小时
        h = h < 10 ? ("0" + h) : h;
        var m = time.getMinutes(); //获取分钟
        m = m < 10 ? ("0" + m) : m;
        var s = time.getSeconds(); //获取秒
        s = s < 10 ? ("0" + s) : s;
        // var str = y + "-" +M + "-" + d;

        var str = y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
        return str;
    }

    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            // ,height: 312
            ,limit: 6
            ,limits: [ 4, 6, 8]
            ,url: '../demo' //数据接口  跳转到DemoServlet
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'id', width:50, sort: true, fixed: 'left'}
                ,{field: 'proCode', title: '编码', width:80}
                ,{field: 'proName', title: '供应商名字', width:140, sort: true}
                ,{field: 'proContact', title: '联系人', width:100}
                ,{field: 'proPhone', title: '电话', width: 120}
                ,{field: 'proAddress', title: '地址', width: 150, sort: true}
                ,{field: 'proFax', title: '传真', width: 120}
                ,{field: 'proDesc', title: '介绍', width: 180}
                ,{field: 'creationDate', title: '创建日期', width: 165, sort: true, templet: function (d) {
                        return dateBirth( d.creationDate)}}
                ,{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}
            ]]
        });

        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(tbdemo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(tbdemo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                // layer.alert('编辑行：<br>'+ JSON.stringify(data))
                layer.open({
                    type: 2,
                    area: ['450px', '500px'],
                    content: 'edit.jsp', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</html>
